<template>
    <h1>APP 组件</h1>

    <h4>obj对象</h4>
    <ul>
        <li>商品ID: {{ obj.id }}</li>
        <li>商品标题: {{ obj.title }}</li>
        <li>商品收藏数量: {{ obj.number }}</li>
    </ul>
    <button @click="changeObj">修改 obj 中的 number</button>

    <h4>newObj对象</h4>
    <ol>
        <li>商品ID: {{ newObj.id }}</li>
        <li>商品标题: {{ newObj.title }}</li>
        <li>商品收藏数量: {{ newObj.number }}</li>
    </ol>
    <button @click="changeNewObj">修改 newObj 中的 number</button>
</template>

<script setup>
import { toRef, toRefs, reactive } from "vue";

const obj = reactive({
    id: "QF001",
    number: 10086,
    title: "一个商品的标题",
});

// console.log(obj)
// console.log(obj.id)
// console.log(obj.number)
// console.log(obj.title)

function changeObj () {
    obj.number++
}

/**
 *  toRefs
 *      能够将我们指定的对象内部的所有属性, 转换成 ref 对象
 *      通过 toRefs 创建出来的对象, 和原本的对象之间共享一个地址
 *      修改其中一个对象, 会影响另外一个对象
 */
const newObj = toRefs(obj);
// console.log(newObj)
// console.log(newObj.id.value)
// console.log(newObj.number.value)
// console.log(newObj.title.value)

function changeNewObj() {
    newObj.number.value++
}





// ==============================toRef==============================

// const obj = {
//     id: "QF001",
//     name: "张三",
// };

/**
 *  toRef
 *      能够帮助我们去拿到对象中某一个属性的值, 并且将它转换成 ref 对象
 */
// const name = toRef(obj, "name");
// console.log(name);
// console.log(name.value);

// console.log('obj.id: ', obj.id)
// console.log('obj.name: ', obj.name)

// const name1 = toRef(obj, 'name')
// const name2 = obj.name

// console.log('name1_toRef: ', name1)
// console.log('name2_obj.name: ', name2)
</script>
